<template>
  <video-player
    class="vjs-custom-skin"
    ref="videoPlayer"
    :options="playerOptions"
    :playsinline="true"
    customEventName="customstatechangedeventname"
  ></video-player>
</template>

<script>
import default_poster from "@/components/myvideo/default_poster.png";

export default {
  name: "Mp4VideoPlayer", // 不能使用 video 命名
  props: {
    src: {
      type: String,
      default: "http://vjs.zencdn.net/v/oceans.mp4"
    }
  },
  data() {
    return {
      playerOptions: {
        sources: [
          {
            type: "video/mp4",
            src: this.src
          }
        ],
        autoplay: true, // 自动播放
        fluid: true, // 按比例缩放适应容器
        aspectRatio: "16:9", // 画面比例
        poster: default_poster //首屏图片
        // height: "120",
        // width: "260",
        // controls: true, // 控制条
        // preload: "auto", // 预加载
        // muted: true, // 消除所有音频
        // loop: false, // 不循环播放
      }
    }
  }
}
</script>
